<script setup>
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'

const route = useRoute()
const articleId = route.params.id
const article = ref(null)
const loading = ref(true)

import { marked } from 'marked'

// 使用marked库的Markdown渲染函数
const markdownToHtml = (markdown) => {
  // 配置marked选项
  marked.setOptions({
    gfm: true,          // 启用GitHub风格的Markdown
    breaks: true,       // 将回车转换为<br>
    headerIds: true,    // 为标题添加id
    mangle: false       // 不转换电子邮件地址
  })
  
  return marked.parse(markdown)
}

// 模拟文章详情数据
const articleDetails = {
  1: {
    id: 1,
    title: 'Vue3 Composition API 实战指南',
    content: '# Vue3 Composition API 实战指南\n\n## 什么是 Composition API？\n\nComposition API 是 Vue3 中引入的新特性，它提供了一种更灵活、更有组织性的方式来编写组件逻辑。与 Options API 相比，Composition API 让我们可以更好地组织和复用代码。\n\n## 为什么使用 Composition API？\n\n### 更好的逻辑复用\n\n在 Vue2 中，我们通常使用混入（mixins）来复用逻辑，但这会导致命名冲突和来源不明确的问题。而 Composition API 让我们可以直接导入和使用逻辑函数。\n\n### 更好的 TypeScript 支持\n\nComposition API 的设计更加符合 TypeScript 的类型推导机制，让我们可以获得更好的类型检查和自动补全。\n\n### 更好的代码组织\n\n对于复杂的组件，Options API 会导致代码分散在各个选项中，而 Composition API 让我们可以按照功能将相关代码组织在一起。',
    date: '2024-01-15',
    author: '技术博主',
    category: '前端开发',
    tags: ['Vue3', 'Composition API', '前端开发']
  },
  2: {
    id: 2,
    title: 'Vite性能优化技巧总结',
    content: '# Vite性能优化技巧总结\n\n## 为什么需要性能优化？\n\n在现代前端开发中，性能优化是一个非常重要的话题。一个性能良好的应用不仅可以提升用户体验，还可以减少服务器负载和带宽消耗。\n\n## Vite 是什么？\n\nVite 是一个现代化的前端构建工具，它基于 ES 模块系统，提供了极快的开发服务器启动速度和热模块替换功能。\n\n## Vite 性能优化技巧\n\n### 1. 使用合理的依赖引入策略\n\n#### 动态导入\n\n对于一些较大的组件或库，我们可以使用动态导入来实现代码分割。\n\n#### 按需引入\n\n对于一些大型库，如 Element Plus、Ant Design Vue 等，我们可以使用按需引入来减少打包体积。',
    date: '2024-01-10',
    author: '前端专家',
    category: '工程化',
    tags: ['Vite', '性能优化', '工程化']
  },
  3: {
    id: 3,
    title: '响应式设计的现代实践',
    content: '# 响应式设计的现代实践\n\n## 什么是响应式设计？\n\n响应式设计是一种设计理念，它让网站能够根据用户的设备（如桌面电脑、平板、手机等）自动调整布局和内容，以提供最佳的用户体验。\n\n## 响应式设计的核心原则\n\n### 1. 流动布局\n\n流动布局使用相对单位（如百分比）而不是固定单位（如像素）来定义元素的宽度和高度，让布局能够根据屏幕尺寸自动调整。\n\n### 2. 灵活的图像\n\n图像也需要能够适应不同的屏幕尺寸。\n\n### 3. 媒体查询\n\n媒体查询让我们可以根据屏幕尺寸应用不同的样式。',
    date: '2024-01-05',
    author: 'UI设计师',
    category: '设计',
    tags: ['响应式设计', 'CSS', 'Web设计']
  }
}

onMounted(() => {
  // 模拟异步加载文章数据
  setTimeout(() => {
    article.value = articleDetails[articleId] || null
    loading.value = false
  }, 300)
})
</script>

<template>
  <div class="article-container">
    <div class="container">
      <!-- 返回按钮 -->
      <div class="back-link">
        <router-link to="/">← 返回首页</router-link>
      </div>

      <!-- 加载状态 -->
      <div v-if="loading" class="loading">
        <p>加载中...</p>
      </div>

      <!-- 文章不存在 -->
      <div v-else-if="!article" class="not-found">
        <h1>文章不存在</h1>
        <p>抱歉，您访问的文章不存在或已被删除。</p>
      </div>

      <!-- 文章内容 -->
      <article v-else class="article">
        <header class="article-header">
          <h1 class="article-title">{{ article.title }}</h1>
          <div class="article-meta">
            <span class="author">{{ article.author }}</span>
            <span class="date">{{ article.date }}</span>
            <span class="category">{{ article.category }}</span>
          </div>
          <div class="article-tags">
            <span v-for="tag in article.tags" :key="tag" class="tag">
              {{ tag }}
            </span>
          </div>
        </header>

        <div class="article-content" v-html="markdownToHtml(article.content)"></div>
      </article>
    </div>
  </div>
</template>

<style scoped>
.article-container {
  min-height: 100vh;
  padding: 2rem 0;
}

.back-link {
  margin-bottom: 2rem;
}

.loading,
.not-found {
  text-align: center;
  padding: 4rem 0;
}

.article {
  background: white;
  border-radius: var(--border-radius);
  padding: 2rem;
  box-shadow: var(--shadow);
}

.article-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-color);
}

.article-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.article-meta {
  display: flex;
  gap: 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  background: #f0f0f0;
  color: var(--text-light);
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
}

.article-content {
  line-height: 1.8;
  color: var(--text-color);
}

.article-content h1,
.article-content h2,
.article-content h3,
.article-content h4,
.article-content h5,
.article-content h6 {
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: var(--secondary-color);
}

.article-content p {
  margin-bottom: 1.5rem;
}

.article-content pre {
  background: #f5f5f5;
  padding: 1rem;
  border-radius: var(--border-radius);
  overflow-x: auto;
  margin-bottom: 1.5rem;
}

.article-content code {
  background: #f5f5f5;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  font-family: 'Courier New', Courier, monospace;
}

.article-content pre code {
  background: none;
  padding: 0;
  border-radius: 0;
}

.article-content a {
  color: var(--primary-color);
  text-decoration: underline;
}

@media (max-width: 768px) {
  .article {
    padding: 1.5rem;
  }
  
  .article-title {
    font-size: 1.5rem;
  }
  
  .article-meta {
    flex-wrap: wrap;
  }
}
</style>